import React, { Component } from "react";
import { TabBar } from "antd-mobile";

import store from "../../store";
// import axios from 'axios'
import "./footer.css";
import { myLogin } from "../../utils/auth";
import PrivateRoute from "../privateRoute";
import Login from "../../pages/my/login/login";
// import { myLogin } from "../../utils/auth";

class Footer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: "home",
      hidden: false,
    };
    store.subscribe(this.footerIsHidden);
  }
  footerIsHidden = () => {
    this.setState(store.getState());
  };
  render() {
    return (
      <TabBar
        unselectedTintColor="#666"
        tintColor="#000"
        barTintColor="white"
        hidden={this.state.hidden}
      >
        <TabBar.Item
          title="天猫"
          key="home"
          icon={
            <div
              style={{
                width: "22px",
                height: "22px",
                background:
                  "url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat",
              }}
            />
          }
          selectedIcon={
            <div
              style={{
                width: "22px",
                height: "22px",
                background:
                  "url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat",
              }}
            />
          }
          selected={this.state.selectedTab === "home"}
          onPress={() => {
            this.props.push("/home");
            this.setState({
              selectedTab: "home",
            });
          }}
          data-seed="logId"
        ></TabBar.Item>
        <TabBar.Item
          icon={
            <div
              style={{
                width: "22px",
                height: "22px",
                background:
                  "url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat",
              }}
            />
          }
          selectedIcon={
            <div
              style={{
                width: "22px",
                height: "22px",
                background:
                  "url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat",
              }}
            />
          }
          title="关注"
          key="attention"
          selected={this.state.selectedTab === "attention"}
          onPress={() => {
            if (localStorage.getItem("token")) {
              this.props.push("/attention");
            } else {
              this.props.push("/login");
            }

            this.setState({
              selectedTab: "attention",
            });
          }}
          data-seed="logId1"
        ></TabBar.Item>
        <TabBar.Item
          icon={
            <div
              style={{
                width: "22px",
                height: "22px",
                background:
                  "url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat",
              }}
            />
          }
          selectedIcon={
            <div
              style={{
                width: "22px",
                height: "22px",
                background:
                  "url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat",
              }}
            />
          }
          title="天猫直播"
          key="goshopping"
          selected={this.state.selectedTab === "goshopping"}
          onPress={() => {
            this.props.push("/goshopping");
            this.setState({
              selectedTab: "goshopping",
            });
          }}
        ></TabBar.Item>
        <TabBar.Item
          icon={{
            uri:
              "https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg",
          }}
          selectedIcon={{
            uri:
              "https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg",
          }}
          title="购物车"
          key="shoppingka"
          selected={this.state.selectedTab === "shoppingka"}
          onPress={() => {
            if (localStorage.getItem("token")) {
              this.props.push("/shoppingka");
            } else {
              this.props.push("/login");
            }

            this.setState({
              selectedTab: "shoppingka",
            });
          }}
        ></TabBar.Item>
        <TabBar.Item
          icon={{
            uri:
              "https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg",
          }}
          selectedIcon={{
            uri:
              "https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg",
          }}
          title="我的"
          key="myis"
          selected={this.state.selectedTab === "myis"}
          onPress={() => {
            this.props.push("/my");
            this.setState({
              selectedTab: "myis",
            });
          }}
        ></TabBar.Item>
      </TabBar>
    );
  }
}

export default Footer;
